<script lang="ts" setup>
import { onMounted, onBeforeUnmount, defineProps, defineEmits, ref } from "vue";
import { Close } from "@element-plus/icons-vue";
import { useRightMenu } from "@/hook/RightMenu";
import { useLoadWidget } from "@/hook/PopupMenuComponent.tsx";

let props = defineProps(["RightMenuData", "params", "onclose"]);

let emits = defineEmits(["close"]);

let RightMenu = ref();

let useMenu = new useRightMenu();

let html = ref();

html.value = useMenu.createRightMenuElement(
  props.RightMenuData,
  null,
  (event: any, element: any, items: any, fn: any) => {
    if (props?.params?.ChangeRightMenuHandle) {
      props.params.ChangeRightMenuHandle instanceof Function &&
        props.params.ChangeRightMenuHandle(event, element, items, fn);
      return false;
    }

    let { type, item, data } = items;

    if (type == "component") {
      let { initialLoadWidget } = useLoadWidget(item.component);
      initialLoadWidget({ ...data, ...props.params });
    } else if (type == "fn") {
      fn instanceof Function ? fn() : "";
    }
  }
);

onMounted(() => {
  RightMenu.value.appendChild(html.value);
});
</script>

<template>
  <div class="RightMenu" ref="RightMenu"></div>
</template>
<style>
.RightMenu {
  position: absolute;
  width: 150px;
  --bgColor: #67a6c7;
  --HBgColor: #4f98be;
  --Li-height: 36px;
  --Box-ShadowColor: #688695;
}
.RightMenu_List {
  list-style-type: none;
  width: 100%;
  height: auto;
  background-color: var(--bgColor);
  box-shadow: 0 0 9px 0px var(--Box-ShadowColor);
  border-radius: 2px;
}
.RightMenu_li {
  height: var(--Li-height);
  line-height: var(--Li-height);
  width: 100%;
  text-indent: 6px;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.5s;
}
.RightMenu_span {
  color: #fff;
  display: block;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.RightMenu_li:hover {
  background-color: var(--HBgColor);
}
.RightMenu_i {
  font-style: normal;
  margin-right: 10px;
  color: #fff;
  font-size: 22px;
}
.RightMenu_children {
  display: none;
  position: absolute;
  left: 99%;
  top: 0;
}
</style>
